<!--
 * @Description: 充电站管理
 * @Author: py
 * @Date: 2024-02-24
-->
<script setup lang="ts" name="station-list">
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'
import { useDicts } from './hooks/use-dicts'

import { chargeStationListApi, dictListApi } from '@fl/api/charge-settle'
import { SearchTable } from '@fl/components'
import { cloneDeep } from 'lodash-es'

import StationDialog from './components/station-dialog.vue'

const isShowDialog = ref<boolean>(false)
const formType = ref<string>('')
const detailId = ref<number | string>('')
const detailData = ref<any>({})
const { getDictOptions, getDictLabel } = useDicts()

const stationTypeOptions = getDictOptions('oStationType')

type DictItem = {
    dictType: string
    dictValue: string | number
    dictLabel: string
}

const dictList = ref<DictItem[]>([])
const vendorOptions = computed(() => {
    return dictList.value.filter(item => item.dictType === 'charge_vendor_type')
})
const vendorMap = computed(() => {
    return vendorOptions.value.reduce((pre, cur) => {
        pre[cur.dictValue] = cur.dictLabel
        return pre
    }, {})
})

function getDictionaryDatas() {
    dictListApi({
        pageNum: 1,
        pageSize: 99999,
    }).then((res) => {
        dictList.value = res || []
    })
}
getDictionaryDatas()

const initialState = {
    stationName: '',
    stationType: '',
    vendorId: '',
}

const queryState = ref({
    ...initialState,
})

const typeMap = {
    1: 'tag-blue',
    2: 'tag-green',
}
// function formatVendor({ cellValue }) {
//     if (cellValue in vendorMap.value) {
//         return vendorMap.value[cellValue]
//     }
//     else {
//         return ''
//     }
// }

const gridOptions = reactive<VxeGridProps>({
    align: 'left',
    border: 'inner',
    columnConfig: {
        resizable: false,
    },
    columns: [
        { align: 'center', title: '序号', type: 'seq', width: 60 },
        { field: 'stationName', minWidth: 150, title: '充电站名称' },
        { slots: { default: 'station' }, title: '站点类型' },
        { field: 'vendorName', title: '所属合作商名称' },
        { field: 'pileCount', title: '桩数量' },
        { field: 'directCount', title: '直流数' },
        { field: 'alternatingCount', title: '交流数' },
        { slots: { default: 'operate' }, title: '操作', width: 105 },
    ],
    // headerCellClassName: 'table-header-cell',
    // headerRowClassName: 'bg-white',
    height: 370,
    rowConfig: {
        isHover: true,
        keyField: 'id',
    },
    showOverflow: false,
})

const tablePage = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})
const isLoading = ref(false)
const tableData = ref([])

function getList() {
    isLoading.value = true

    const oParams = {
        orders: [{
            column: 'create_time',
            asc: false,
        }],
        pageNum: tablePage.value.currentPage,
        pageSize: tablePage.value.pageSize,
        ...queryState.value,
    }
    chargeStationListApi(oParams).then((res) => {
        const { records, total } = res
        tablePage.value.total = +total
        tableData.value = records
    }).finally(() => {
        isLoading.value = false
    })
}
getList()

function handleSearch() {
    tablePage.value.currentPage = 1
    getList()
}
function handleReset() {
    queryState.value = {
        ...initialState,
    }
    tablePage.value.currentPage = 1
    tablePage.value.pageSize = 10
    getList()
}

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
    getList()
}

function toCreate() {
    formType.value = 'create'
    isShowDialog.value = true
}
function toEdit(row) {
    detailId.value = row.id
    formType.value = 'edit'
    detailData.value = cloneDeep(row)
    isShowDialog.value = true
}
function toDetails(row) {
    detailId.value = row.id
    formType.value = 'detail'
    detailData.value = cloneDeep(row)
    isShowDialog.value = true
}
</script>

<template>
    <ElCard shadow="never"
            class="mb-20 border-none"
    >
        <el-form inline
                 class="search-form"
                 :model="queryState"
        >
            <el-form-item label="充电站名称">
                <el-input v-model="queryState.stationName"
                          placeholder="请输入"
                          clearable
                />
            </el-form-item>

            <el-form-item label="站点类型">
                <el-select v-model="queryState.stationType"
                           clearable
                >
                    <el-option v-for="item in stationTypeOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="合作商名称">
                <el-select v-model="queryState.vendorId"
                           clearable
                >
                    <el-option v-for="item in vendorOptions"
                               :key="item.dictValue"
                               :label="item.dictLabel"
                               :value="item.dictValue"
                    />
                </el-select>
            </el-form-item>

            <el-form-item class="search-btns">
                <el-button type="primary"
                           @click="handleSearch"
                >
                    搜索
                </el-button>

                <el-button @click="handleReset">
                    重置
                </el-button>
            </el-form-item>
        </el-form>
    </ElCard>

    <ElCard shadow="never"
            class="border-none"
    >
        <SearchTable v-bind="gridOptions"
                     v-model:pager="tablePage"
                     :loading="isLoading"
                     :data="tableData"
                     @page-change="handlePageChange"
        >
            <template #toolbar_buttons>
                <el-button type="primary"
                           class="mb-10"
                           @click="toCreate"
                >
                    <span class="i-mingcute:add-line mr-4" />
                    <!-- <span class="vxe-icon-add mr-4" /> -->

                    <span class="lh-16">新建</span>
                </el-button>
            </template>

            <template #station="{ row }">
                <span class="status-tag"
                      :class="typeMap[row.stationType]"
                >
                    {{ getDictLabel('oStationType', row.stationType) }}
                </span>
            </template>

            <template #operate="{ row }">
                <div class="row-btns">
                    <span class="btn-operate"
                          @click="toEdit(row)"
                    >
                        编辑
                    </span>

                    <span class="btn-operate"
                          @click="toDetails(row)"
                    >
                        查看
                    </span>
                </div>
            </template>
        </SearchTable>
    </ElCard>

    <StationDialog v-model:id="detailId"
                   v-model:visible="isShowDialog"
                   :form-type="formType"
                   :data="detailData"
                   :vendor-options="vendorOptions"
                   :vendor-map="vendorMap"
                   @success="getList"
    />
</template>

<style lang="less" scoped>
@import '../custom.less';

.search-form {
    :deep(.el-form-item) {
        width: 300px;
        margin-right: 20px;
        margin-bottom: 0;

        &.search-btns {
            width: auto;
            margin-right: 0;
        }
    }
}
</style>
